@use "../../variables.scss";
$cell-width: 140px;

.VersionHistoryRowWrapper {
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 15px;
  background-color: #ffffff;

  &.classic {
    border-radius: 0;
    border-bottom: 1px solid #8e969a;
    &:last-child {
      border-bottom: none;
    }
  }

  &.is-new {
    -webkit-animation: newVersion 9s ease forwards; /* Safari 4+ */
    -moz-animation: newVersion 9s ease forwards; /* Fx 5+ */
    -o-animation: newVersion 9s ease forwards; /* Opera 12+ */
    animation: newVersion 9s ease forwards; /* IE 10+, Fx 29+ */
    animation: newVersion 9s ease forwards;
  }
  &.show-preflight-passed-text .checks-running-text {
    -webkit-animation: preflightPassedText 15s ease forwards; /* Safari 4+ */
    -moz-animation: preflightPassedText 15s ease forwards; /* Fx 5+ */
    -o-animation: preflightPassedText 15s ease forwards; /* Opera 12+ */
    animation: preflightPassedText 15s ease forwards; /* IE 10+, Fx 29+ */
    animation: preflightPassedText 15s ease forwards;
  }
}

.VersionHistoryRow {
  &:last-child {
    margin-bottom: 0;
  }

  & > div:last-child {
    min-width: 225px;
  }
}

.AppVersionHistory {
  max-width: 1160px;
  width: 100%;
}

.upstream-version-box-wrapper {
  background: variables.$sub-nav-color;
  border-radius: 6px;
  padding: 15px;
  width: 100%;
  max-width: 663px;

  .watch-icon {
    width: 48px;
    height: 48px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .new-version-wrapper {
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #ffffff;
  }
}

.info-box {
  background-color: variables.$primary-light-color;
  border-radius: 4px;
  padding: 12px;
  text-align: center;
}

.checking-update-error-wrapper {
  background-color: var(--error-color-light);
  border-radius: 4px;
  padding: 15px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.airgap-upload-error-wrapper {
  background-color: var(--error-color-light);
  border-radius: 4px;
  padding: 0px 5px 0px 5px;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}

.watch-cell {
  width: $cell-width;
}

.gh-version-detail-text {
  position: relative;
  top: 1px;
}

.ActiveRelease-wrapper {
  .no-current-version {
    background-color: variables.$primary-light-color;
    margin-top: 16px;
    border-radius: 4px;
    padding: 16px 12px;
  }
}

.ReactModal__Overlay .SkipModal .btn.secondary {
  background-color: #ffffff;
  margin-left: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: variables.$secondary-color;
  color: variables.$secondary-color;
  box-shadow: none;
}

.release-notes-link {
  color: var(--link-color);

  &:hover {
    cursor: pointer;
  }
}

.logs-modal {
  height: 70%;
  width: 100%;
  max-width: 900px;
  display: flex;
}

.monaco-editor-wrapper {
  margin-top: 12px;
  border-radius: 4px;
}

.action-tab-bar .tab-item {
  font-size: 12px;
  font-weight: 500;
  color: variables.$text-color-body-copy;
  padding: 0 10px;
  border-right: 1px solid variables.$border-color;
  line-height: 15px;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;

  &:hover {
    color: variables.$text-color-accent;
  }

  &.is-active {
    color: variables.$text-color-secondary;
    font-weight: 600;

    &::after {
      content: "";
      position: absolute;
      bottom: -16px;
      display: block;
      width: 8px;
      height: 8px;
      transform: rotate(45deg);
      background-color: #ffffff;
      border-top: 1px solid variables.$border-color;
      border-left: 1px solid variables.$border-color;
      left: 50%;
      margin-left: -4px;
    }
  }

  &.blue.is-active::after {
    background-color: variables.$primary-light-color;
  }

  &:last-child {
    border-right: none;
  }
}

.TableDiff--Wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;

  &:not(.classic) {
    padding: 15px;
    border-radius: 4px;
    // background-color: $really-light-accent;
  }

  &.no-max {
    max-width: none;
  }

  &.gitops-enabled {
    margin-top: 30px;
  }

  &.currentVersionCard--wrapper {
    position: fixed;
    width: 340px;
  }

  .currentVersion--wrapper {
    // background-color: #ffffff;
    border-radius: 4px;
    padding: 8px;

    .watch-icon {
      width: 45px;
      height: 45px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      // border-radius: 40px;
      // box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    }
  }
}

.checks-running-text {
  position: absolute;
  bottom: -26px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: variables.$text-color-body-copy;

  &.err {
    color: var(--error-color);
  }
  &.warning {
    color: var(--warning-color);
    &.without-btns {
      transform: translateX(-70%);
    }
  }
  &.success {
    color: var(--success-color);
  }
}

.DiffOverlay {
  width: calc(100% - 60px);
  background: white;
  position: absolute;
  left: 15px;
  padding: 15px;
  border-radius: 4px;
  height: 100%;
}

.overlay {
  user-select: none;
  cursor: pointer;
  a,
  button,
  span {
    pointer-events: none;
  }
}

.overlay.selected {
  background: rgba(51, 122, 183, 0.1);
}

.overlay.disabled {
  background: #fafafa;
  cursor: not-allowed;
}

.checkbox {
  align-self: center;
  width: 16px;
  height: 16px;
  border: solid 1px var(--primary-color);
  border-radius: 3px;
}

.checkbox.checked {
  background-color: var(--primary-color);
  background-image: url("@src/images/main_spritesheet.svg");
  background-position: 1px -431px;
}

.checkbox.disabled {
  border: solid 1px #c4c7ca;
}

.ErrorWrapper {
  padding: 15px 20px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
  line-height: normal;
  border-radius: 4px;
  background-color: var(--error-color-light);
  color: var(--error-color);

  .title {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .err {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
  }
}

@-webkit-keyframes newVersion {
  0% {
    background-color: #fff7dc;
  }
  100% {
    background-color: #ffffff;
  }
}
@-moz-keyframes newVersion {
  0% {
    background-color: #fff7dc;
  }
  100% {
    background-color: #ffffff;
  }
}
@-o-keyframes newVersion {
  0% {
    background-color: #fff7dc;
  }
  100% {
    background-color: #ffffff;
  }
}
@keyframes newVersion {
  0% {
    background-color: #fff7dc;
  }
  100% {
    background-color: #ffffff;
  }
}

@-webkit-keyframes preflightPassedText {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes preflightPassedText {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes preflightPassedText {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes preflightPassedText {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
